import React from "react"
import { ScreenshotThumbnails } from "@/models/detail-result"
import styled from "styled-components"

const StyledImgContainer = styled.div`
  display: inline-block;
  margin-right: 10px;
  width: 200px;
  border: 1px dashed gray;
  img {
    display: block;
    width: 200px;
  }
`

export const Screenshots: React.FC<{ info?: ScreenshotThumbnails }> = ({
  info,
}) => {
  return (
    <div
      className="mb-6 p-5 border bg-white rounded-md"
      style={{ width: "70%" }}
    >
      <h3 className="text-lg mb-5">流程截图</h3>
      <div className="overflow-auto" style={{ whiteSpace: "nowrap" }}>
        {info?.details.items?.map((it) => {
          return (
            <StyledImgContainer key={it.timing} className="">
              <img src={it.data} />
            </StyledImgContainer>
          )
        })}
      </div>
    </div>
  )
}
